<template>
  <el-date-picker
    ref="datePickerRef"
    v-bind="$attrs"
    :model-value="modelValue"
    @change="handleChange"
    @blur="(e) => emit('blur', e)"
    @focus="(e) => emit('focus', e)"
    @clear="() => emit('clear')"
    @panel-change="
      (date, mode, year, view) => emit('panel-change', date, mode, year, view)
    "
    @calendar-change="(date) => emit('calendar-change', date)"
    @visible-change="(visible) => emit('visible-change', visible)"
  >
    <template
      v-for="item in $attrs.slots"
      #[item.name]="scopedData"
      :key="item.name"
    >
      <component :is="item.content" v-bind="scopedData" />
    </template>
  </el-date-picker>
</template>

<script setup>
const modelValue = defineModel({
  type: [String, Number, Object],
  default: '',
})
const emit = defineEmits([
  'change',
  'blur',
  'focus',
  'clear',
  'panel-change',
  'calendar-change',
  'visible-change',
])

const datePickerRef = ref(null)

function handleChange(value) {
  modelValue.value = value
  emit('change', value)
}

defineExpose(
  new Proxy(
    {},
    {
      get(target, key) {
        return datePickerRef.value?.[key]
      },
      has(target, key) {
        return key in datePickerRef.value
      },
    },
  ),
)
</script>
